<script setup lang="ts">
import { Panel } from '@vue-flow/core';
import Back from './btns/Back.vue';
import AddNode from '@/pages/HJ-Flow/to-npm/src/panel/btns/add-node.vue';

const emits = defineEmits(['addNode', 'reset']);

const reset = () => {
  emits('reset');
};

const onAddNode = (type: string) => {
  emits('addNode', type);
  console.log(type, 'in panel');
};
</script>

<template>
  <Panel position="top-right" class="process-panel">
    <Back @click="reset" />
    <add-node @addNode="onAddNode"></add-node>
  </Panel>
</template>

<style scoped lang="less">
.process-panel {
  background-color: #2d3748;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row-reverse;
}

.process-panel button {
  border: none;
  cursor: pointer;
  background-color: #4a5568;
  border-radius: 8px;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox-panel {
  display: flex;
  align-items: center;
  gap: 4px;
}

.process-panel button:hover,
.layout-panel button:hover {
  background-color: #2563eb;
  transition: background-color 0.2s;
}

.process-panel label {
  color: white;
  font-size: 12px;
}
</style>
